<%--
  Created by IntelliJ IDEA.
  User: 13009
  Date: 2022/4/14
  Time: 15:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" id="favicon" href="${path}/imgs/index/favicon.ico" type="image/x-icon">
    <title>个人中心</title>
    <link rel="stylesheet" href="${path}/plugins/layui/css/layui.css">
    <!-- 引入bootstrap.css - 开发环境/bootstrap.min.css - 生产环境-->
    <link rel="stylesheet" href="${path}/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <!-- 引入登录所需要的h+ -->
    <link href="${path}/plugins/Hplus/css/font-awesome.css" rel="stylesheet">

    <link href="${path}/plugins/Hplus/css/animate.css" rel="stylesheet">
    <link href="${path}/plugins/Hplus/css/style.css" rel="stylesheet">
    <link rel="stylesheet" href="${path}/css/index/index.css">
    <link rel="stylesheet" href="${path}/css/personal/personal.css">

</head>
<body>
<%@include file="../nav/navbarheader.jsp"%>
<!-- 中间内容 -->
<div class="container-fluid personal">
    <div class="content">
        <div class="bigheadportrait">
            <img src="${user.headPicture}" alt="">
        </div>
        <div class="username">
            <span>${user.username}</span>
        </div>
        <div class="mdallname">
            <span>@${user.username}</span>
        </div>
        <div class="count">
            <div class="comment">
                <p>点评数</p>
                <p id="commentCounts"></p>
            </div>
            <div class="likes">
                <p>点赞数</p>
                <p id="likesCounts"></p>
            </div>
            <div class="collection">
                <p>收藏数</p>
                <p id="collectionCounts"></p>
            </div>
        </div>
    </div>
    <div class="content ulcontainer">
        <ul id="myTab" class="nav nav-tabs">
            <li class="active">
                <a href="#myIndex" data-toggle="tab">首页</a>
            </li>
            <li><a href="#comment" data-toggle="tab">评价</a></li>
            <li><a href="#collection" data-toggle="tab">收藏</a></li>
            <li><a href="#selfinfo" data-toggle="tab">个人中心</a></li>
        </ul>
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade in active" id="myIndex">
                <!-- 首页 -->
                <div class="col-md-3 myleft">
<%--                    我的动态--%>
                    <div class="col-md-12 recent" id="recent">

                    </div>
<%--                    我的消息--%>
                    <div class="col-md-12 mymessage" id="myMessage">

                    </div>
                </div>
<%--                    最近四次消费--%>
                <div class="col-md-9 commorder" id="commorder">
<%--                    <p class="text-center">--%>
<%--                        最近四次消费--%>
<%--                    </p>--%>
<%--                    <div class="col-md-12 orderouter">--%>
<%--                        <div class="col-md-2 orderimg">--%>
<%--                            <img src="${path}/imgs/index/recommend2.jpg" alt="">--%>
<%--                        </div>--%>
<%--                        <div class="col-md-7 ordercontent">--%>
<%--                            <p>晶丽海鲜自助餐厅 <em><img src="${path}/imgs/storeInfo/haoping.png" alt=""></em></p>--%>
<%--                            <p>套餐名称xxxxx</p>--%>
<%--                            <p>该订单于2022-04-07使用</p>--%>
<%--                        </div>--%>
<%--                        <div class="col-md-2 ordercontent">--%>
<%--                            <br>--%>
<%--                            <button type="button" class="btn btn-w-m btn-primary col-md-8">写评价</button>--%>
<%--                            <br><br>--%>
<%--                            <button type="button" class="btn btn-w-m btn-default col-md-8">全部评价</button>--%>
<%--                        </div>--%>
<%--                    </div>--%>
                </div>
            </div>
            <div class="tab-pane fade" id="comment">
                <!-- 评价 -->
                <div class="social-feed-separated commentitems">

                    <div class="social-avatar">
                        <a href="">
                            <img alt="image" src="${user.headPicture}">
                        </a>
                    </div>

                    <div class="social-feed-box">

                        <div class="pull-right social-action dropdown">
                            <button data-toggle="dropdown" class="dropdown-toggle btn-white" aria-expanded="false">
                                <svg t="1649295633848" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2231" width="25" height="25">
                                    <path d="M558.1 928.3H280.5c-12.6 0-22.7-10.2-22.7-22.8V282c0-12.6 10.2-22.8 22.7-22.8 12.6 0 22.7 10.2 22.7 22.8v600.7h254.9c12.6 0 22.7 10.2 22.7 22.8 0.1 12.6-10.1 22.8-22.7 22.8z m197.4 0h-80.2c-12.6 0-22.7-10.2-22.7-22.8 0-12.6 10.2-22.8 22.7-22.8h57.5v-352c0-12.6 10.2-22.8 22.7-22.8 12.6 0 22.7 10.2 22.7 22.8v374.9c0.1 12.5-10.1 22.7-22.7 22.7z m0 0" fill="#2197EF" p-id="2232"></path><path d="M360.8 903.1h-80.2V509.5c0-22.2 18-40.3 40.1-40.3s40.1 18 40.1 40.3v393.6z m0 0" fill="#CEE8FA" p-id="2233"></path><path d="M360.8 925.9h-80.2c-12.6 0-22.7-10.2-22.7-22.8V509.5c0-34.8 28.2-63.1 62.8-63.1s62.8 28.3 62.8 63.1v393.6c0 12.6-10.2 22.8-22.7 22.8z m-57.5-45.6H338V509.5c0-9.6-7.8-17.4-17.4-17.4s-17.4 7.8-17.4 17.4v370.8z m0 0" fill="#2197EF" p-id="2234"></path><path d="M558.2 903.1H478V509.5c0-22.2 18-40.3 40.1-40.3 22.2 0 40.1 18 40.1 40.3v393.6z m0 0" fill="#CEE8FA" p-id="2235"></path><path d="M558.2 925.9H478c-12.6 0-22.7-10.2-22.7-22.8V509.5c0-34.8 28.2-63.1 62.8-63.1 34.7 0 62.8 28.3 62.8 63.1v393.6c0 12.6-10.2 22.8-22.7 22.8z m-57.5-45.6h34.7V509.5c0-9.6-7.8-17.4-17.4-17.4-9.6 0-17.4 7.8-17.4 17.4v370.8z m0 0" fill="#2197EF" p-id="2236"></path><path d="M755.5 903.1h-80.2V509.5c0-22.2 18-40.3 40.1-40.3s40.1 18 40.1 40.3v393.6z m0 0" fill="#CEE8FA" p-id="2237"></path><path d="M755.5 925.9h-80.2c-12.6 0-22.7-10.2-22.7-22.8V509.5c0-34.8 28.2-63.1 62.8-63.1 34.7 0 62.8 28.3 62.8 63.1v393.6c0.1 12.6-10.1 22.8-22.7 22.8zM698 880.3h34.7V509.5c0-9.6-7.8-17.4-17.4-17.4-9.6 0-17.4 7.8-17.4 17.4v370.8z m0 0" fill="#2197EF" p-id="2238"></path><path d="M226.2 215.1H810v118.7H226.2z" fill="#CEE8FA" p-id="2239"></path><path d="M809.9 356.6H226.2c-12.6 0-22.7-10.2-22.7-22.8V215.1c0-12.6 10.2-22.8 22.7-22.8H810c12.6 0 22.7 10.2 22.7 22.8v118.7c0 12.6-10.2 22.8-22.8 22.8z m-561-45.6h538.3v-73.1H248.9V311z m0 0" fill="#2197EF" p-id="2240"></path><path d="M613.2 237.9c-12.6 0-22.7-10.2-22.7-22.8v-68.5H445.6v68.5c0 12.6-10.2 22.8-22.7 22.8-12.6 0-22.7-10.2-22.7-22.8v-91.3c0-12.6 10.2-22.8 22.7-22.8h190.3c12.6 0 22.7 10.2 22.7 22.8v91.3c0 12.6-10.2 22.8-22.7 22.8z m0 0" fill="#2197EF" p-id="2241"></path></svg>
                            </button>

                        </div>
                        <div class="social-avatar">
                            <a href="#">
                                用户名
                            </a>
                            <mdall class="text-muted">2022年4月5日</mdall>
                        </div>
                        <div class="social-body">
                            <p>
                                标题
                            </p>
                            <img src="${path}/imgs/index/recommend1.jpg" class="img-responsive">
                            <img src="${path}/imgs/index/recommend2.jpg" class="img-responsive">
                            <img src="${path}/imgs/index/recommend3.jpg" class="img-responsive">
                            <div class="btn-group">
                                <button class="btn btn-white btn-xs">赞(500)</button>
                                <button class="btn btn-white btn-xs"><i class="fa fa-share"></i> 分享</button>
                            </div>
                        </div>
                        <div class="social-footer">
                            <div class="social-comment">
                                <a href="" class="pull-left">
                                    <img alt="image" src="${path}/imgs/index/recommend3.jpg">
                                </a>
                                <div class="media-body">
                                    <a href="#">
                                        用户名
                                    </a> 图表展示、数据可视化是前端领域一个麻烦且重要的事情，这里推荐了11个JS图表库，各取所需吧
                                    <br>
                                    <a href="#" class="mdall"><i class="fa fa-thumbs-up"></i> 26</a> -
                                    <mdall class="text-muted">4月5日</mdall>
                                </div>
                            </div>

                            <div class="social-comment">
                                <a href="" class="pull-left">
                                    <img alt="image" src="${path}/imgs/index/recommend1.jpg">
                                </a>
                                <div class="media-body">
                                    <a href="#">
                                        用户名
                                    </a> 看上去不错，如能结合乐曲播放有个动效就更酷了 :z
                                    <br>
                                    <a href="#" class="mdall"><i class="fa fa-thumbs-up"></i> 11</a> -
                                    <mdall class="text-muted">4月5日</mdall>
                                </div>

                                <div class="social-comment">
                                    <a href="" class="pull-left">
                                        <img alt="image" src="${path}/imgs/index/recommend1.jpg">
                                    </a>
                                    <div class="media-body">
                                        <a href="#">
                                            用户名
                                        </a> 用checkbox + CSS 也能玩出来很多花样，来看看这些有趣的例子吧！
                                        <br>
                                        <a href="#" class="mdall"><i class="fa fa-thumbs-up"></i> 11</a> -
                                        <mdall class="text-muted">4月5日</mdall>
                                    </div>
                                </div>

                                <div class="social-comment">
                                    <a href="" class="pull-left">
                                        <img alt="image" src="${path}/imgs/index/recommend2.jpg">
                                    </a>
                                    <div class="media-body">
                                        <textarea class="form-control" placeholder="填写评论..."></textarea>
                                    </div>
                                </div>

                            </div>

                            <div class="social-comment">
                                <a href="" class="pull-left">
                                    <img alt="image" src="${path}/imgs/index/recommend2.jpg">
                                </a>
                                <div class="media-body">
                                    <a href="#">
                                        用户名
                                    </a> 有情怀的工程师，赞。
                                    <br>
                                    <a href="#" class="mdall"><i class="fa fa-thumbs-up"></i> 26</a> -
                                    <mdall class="text-muted">4月5日</mdall>
                                </div>
                            </div>

                            <div class="social-comment">
                                <a href="" class="pull-left">
                                    <img alt="image" src="${path}/imgs/index/recommend2.jpg">
                                </a>
                                <div class="media-body">
                                    <a href="#">
                                        用户名
                                    </a> 几位同学中奖，请将你们的收获地址电话姓名私信给我哦~
                                    <br>
                                    <a href="#" class="mdall"><i class="fa fa-thumbs-up"></i> 26</a> -
                                    <mdall class="text-muted">4月5日</mdall>
                                </div>
                            </div>

                            <div class="social-comment">
                                <a href="" class="pull-left">
                                    <img alt="image" src="${path}/imgs/index/recommend1.jpg">
                                </a>
                                <div class="media-body">
                                    <textarea class="form-control" placeholder="填写评论..."></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="collection">
                <!-- 收藏 -->
<%--                ajax异步加载--%>
            </div>
            <div class="tab-pane fade" id="selfinfo">
                <!-- 个人简介 -->
                <form id="selfInfoForm" class="layui-form" action="${path}/personal/personalFlash" method="get">
                    <div class="midinfo col-md-12">
                        <div class="infofirst col-md-12">
                            <div class="infohead col-md-5">
                                <span>原头像:</span>
                                <img src="${user.headPicture}" alt="">
                                <input type="hidden" name="headPicture" value="${user.headPicture}">
                            </div>
                            <div class="layui-upload col-md-6">
                                <button type="button" class="layui-btn" id="test1">上传图片</button>
                                <div class="layui-upload-list">
                                    <img class="layui-upload-img" id="demo1">
                                    <p id="demoText"></p>
                                </div>
                                <div style="width: 95px;">
                                    <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                                        <div class="layui-progress-bar" lay-percent=""></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="layui-form-item">
                                <label class="layui-form-label"><span>用户名 :</span></label>
                                <div class="layui-input-block">
                                    <input type="text" name="username" value="${user.username}" lay-verify="title" autocomplete="off" placeholder="用户名" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="layui-inline">
                                <label class="layui-form-label"><span>手机号码 :</span></label>
                                <div class="layui-input-inline">
                                    <input readonly="true" type="tel" name="usertelNumber" value="${user.telNumber}" class="layui-input">
<%--                                    <input readonly="true" type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">--%>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="layui-form-item">
                                <label class="layui-form-label">所在地</label>
                                <div class="layui-input-inline">
                                    <select name="province" id="province">
                                        <option value="${user.province}" selected="">${user.province}</option>
                                        <option disabled="">==请选择省份==</option>
                                        <option value="江苏省">江苏省</option>
                                    </select>
                                </div>
                                <div class="layui-input-inline">
                                    <select name="city" id="city">
                                        <option value="${user.city}" selected="">${user.city}</option>
                                        <option disabled="">==请选择所在市==</option>
                                        <option value="苏州">苏州</option>
                                        <option value="淮安">淮安</option>
                                        <option value="南京">南京</option>
                                        <option value="苏州">苏州</option>
                                    </select>
                                </div>
                                <div class="layui-input-inline">
                                    <select name="area" id="area">
                                        <option value="${user.area}" selected="">${user.area}</option>
                                        <option disabled="">==请选择所在地==</option>
                                        <option value="吴中区">吴中区</option>
                                        <option value="张家港">张家港</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label"><span>消费区间</span></label>
                                    <div class="layui-input-inline" style="width: 60px;">
                                        <input type="text" id="leftConsum" value="${user.leftConsum}" placeholder="￥" autocomplete="off" class="layui-input">
                                    </div>
                                    <div class="layui-form-mid">-</div>
                                    <div class="layui-input-inline" style="width: 60px;">
                                        <input type="text" id="rightConsum" value="${user.rightConsum}" placeholder="￥" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="layui-form-item">
                                <label class="layui-form-label"><span>口味类型 :</span></label>
                                <div class="layui-input-block">
                                    <div class="layui-input-inline">
                                        <select name="flavorId" id="flavorId">
                                            <option value="1" selected="">火锅</option>
                                            <option value="2">甜点</option>
                                            <option value="3">西餐</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-9">
                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">个性签名</label>
                                <div class="layui-input-block">
                                    <textarea id="signature" placeholder="${user.signature}" class="layui-textarea"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button id="selfSubmit" type="button" class="layui-btn" lay-submit="demo1demo1" lay-filter="demo1">立即提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>

                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 底部导航 -->
<%@include file="../nav/navbarfooter.jsp"%>
<script src="${path}/plugins/jquery.min.js"></script>
<script src="${path}/js/index/index.js"></script>
<script src="${path}/plugins/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
<script src="${path}/plugins/layui/layui.js"></script>
<script src="${path}/js/personal/personal.js"></script>
<script>
    $(function () {
        $.ajax({
            type: "post",
            url: "/fr/personal/myComments/" + $("input[name='userIdHid']").val() + "",
            success:function (res) {
                $("#commentCounts").text(res.data);
            }
        })
        $.ajax({
            type: "post",
            url: "/fr/personal/myZan/" + $("input[name='userIdHid']").val() + "",
            success:function (res) {
                $("#likesCounts").text(res.data);
            }
        })
        $.ajax({
            type: "post",
            url: "/fr/personal/myCollections/" + $("input[name='userIdHid']").val() + "",
            success:function (res) {
                $("#collectionCounts").text(res.data);
            }
        })
    })

    $(function () {
        $.ajax({
            type:"post",
            url:"/fr/personal/myRecent/"+$("input[name='userIdHid']").val()+"",
            success:function (res) {
                let list = res.data;
                let str1 ="<p class=\"text-center\">最近动态</p>\n";
                let str = "";
                let str2 ="<button type=\"button\" class=\"btn btn-w-m btn-default col-md-12\" style=\"line-height: 15px;height: 30px;\">>>>>>>>>>>>>>>></button>";

                $.each(list,function (index,item) {
                    str +="                        <div>\n" +
                        "                            <span>"+item.addTime+"  添加了<a>"+item.shopName+"店铺的评价</a></span>\n" +
                        "                        </div>\n";
                });
                $("#recent").html(str1+str+str2);
            }
        })

        $.ajax({
            type:"post",
            url:"/fr/personal/myMessage/"+$("input[name='userIdHid']").val()+"",
            success:function (res) {
                let list = res.data;
                let str1 ="<p class=\"text-center\">我的消息</p>\n";
                let str = "";
                let str2 ="<button type=\"button\" class=\"btn btn-w-m btn-default col-md-12\" style=\"line-height: 15px;height: 30px;\">>>>>>>>>>>>>>>></button>";

                $.each(list,function (index,item) {
                    str +="<div>\n" +
                        " <span>"+item.replyTime+" 对"+item.shopName+"的评论收到了<a>"+item.userName+"的回复</a></span>\n" +
                        " </div>";
                });
                $("#myMessage").html(str1+str+str2);
            }
        })

        $.ajax({
            type:"post",
            url:"/fr/personal/myOrder/"+$("input[name='userIdHid']").val()+"",
            success:function (res) {
                let list = res.data;
                let str1 ="<p class=\"text-center\">最近四次消费\n</p>\n";
                let str = "";
                $.each(list,function (index,item) {
                str +="                    <div class=\"col-md-12 orderouter\">\n" +
                    "                        <div class=\"col-md-2 orderimg\">\n" +
                    "                            <img src=\"/fr/"+item.picture+"\" alt=\"\">\n" +
                    "                        </div>\n" +
                    "                        <div class=\"col-md-7 ordercontent\">\n" +
                    "                            <p>"+item.shopName+" <em>"+item.shopScore+"</em></p>\n" +
                    "                            <p>套餐名称:"+item.goodName+"</p>\n" +
                    "                            <p>该订单于"+item.userTime+"创建</p>\n" +
                    "                        </div>\n" +
                    "                        <div class=\"col-md-2 ordercontent\">\n" +
                    "                            <br>\n";
                        if(item.status==4){
                            str +="<button type=\"button\" onclick='addReview("+item.shopId+","+item.orderId+")' class=\"btn btn-w-m btn-primary col-md-8\">写评价</button>\n";
                        }else {
                            str +="<button type=\"button\" class=\"btn btn-w-m btn-success col-md-8\">已评价</button>";
                        }
                    str +="                            <br><br>\n" +
                    "                            <button type=\"button\" onclick='enterShop("+item.shopId+")' class=\"btn btn-w-m btn-default col-md-8\">查看该店铺</button>\n" +
                    "                        </div>\n" +
                    "                    </div>";
                });
                $("#commorder").html(str1+str);
            }
        })
    })
    function addReview(shopId,orderId){
        window.location.href = "http://localhost:8081/fr/reviews/"+shopId+"/"+orderId+"";
    }
    function enterShop(shopId) {
        window.location.href = "http://localhost:8081/fr/storeInfo/enter/"+shopId+"";
    }
</script>
</body>
</html>
